<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #container {
      height: 100vh;
    }
  </style>
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=LTcdtaUhvwYYnvWd90tfvhBYBGgxmwbC"></script>
</head>

<body>
  <div id="container"></div>
  <script>
    // 百度地图API功能
    // 学过：
    const map = new BMap.Map("container");
    const point = new BMap.Point(116.417854, 39.921988);
    map.centerAndZoom(point, 15);

    // ========== 新的代码 开始 ===================
    const opts = {
      position: point,                  // 指定文本标注所在的地理位置
    }
    // 创建文本标注对象
    const label = new BMap.Label("等你下课", opts);  // 创建文本标注对象
    // setStyle 设置样式 - 有一些默认样式，可以自己手写覆盖
    label.setStyle({
      border: "none",
      backgroundColor: "rgba(35, 185, 116,0.6)",
      color: "#fff",
      fontSize: "14px",
      height: "20px",
      padding: "20px",
      lineHeight: "20px",
      fontFamily: "微软雅黑"
    });
    // ========== 新的代码 结束 ===================

    // 学过：往地图添加覆盖物实例
    map.addOverlay(label);
  </script>
</body>

</html>